<template>
	<view>
		<view style="position: relative;">


			<!-- <view :style="'height:' +  demo.height + 'px;'" class="topTitleDefault">
			</view> -->
			<!-- ,linear-gradient(90deg, #2D6DFF 0%, #7A73FF 100%) -->
			<view class="pageTop" :style="'height:' + bgHeight + 'px;'">
				<!-- <image class="image-bg" src="../../static/home2x.png" /> -->
				<view style="width: 100%;position: absolute;bottom: 40px;">
					<view class="flexBetween">
						<view class="pageTopLeft">
							<view class="pageTopLeftTitle flexAlignStart" @click="selectLabor">
								<div>{{spaceNameData.projectName}}</div>
								<div style='width: 18px;height: 18px;vertical-align: middle;' v-if='spaceLength>=2'>
									<van-icon name="arrow" />
								</div>

							</view>
							<view class="pageTopLeftKey pageSizeOpacity">
								{{spaceNameData.spaceName}}
							</view>
						</view>
						<view class="pageTopRight">
							<view class="" style="text-align: right;margin-bottom: 7px;">
								<van-button type="default" @click='onSign' v-if='!signFlag' style='height: 27px;
    line-height: 27px;'>签到</van-button>
								<van-button type="warning" v-if='signFlag' style='height: 27px;
    line-height: 27px;'>已签到</van-button>
							</view>
							<view style="font-size:10px ;" class="pageSizeOpacity">
								{{signExplain}}

							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="position: absolute;bottom: -10px;width: 100%;">
				<view class="select flexBetweenCenter">
					<view style="background-color: #fff;">
						<text style='margin-right: 10px;' :class="{ selectActive: selectFlag=='2' }" @click="onNewHot('2')">最新</text>
						<text :class="{ selectActive: selectFlag=='1' }" @click="onNewHot('1')">最热</text>
					</view>
					<view class="flexAlignCenter" @click='onSelect'>

						<div style='width: 15px;height: 20px;'>
							<van-icon name="filter-o" style='font-style: 15px;color:#1890ff' />
						</div>

						<div style='font-size: 12px;color: #666;'>筛选</div>
					</view>
				</view>
			</view>
		</view>
		<view v-if="scrollTop>=155" class="topTitleActive topDiv" :style="'height:' +  demo.height + 'px;'+ 'padding-top:' + demo.top + 'px;padding-bottom:10rpx;'+'line-height:' +  demo.height + 'px;'">
			工地云课堂
		</view>

		<!-- 占住定位的底部 -->
		<view style="height:20px">

		</view>
		<!-- //筛选条件 -->
		<view class="selectProject" style="width: calc(100% - 20px);padding-left: 10px;padding-top: 0px;padding-right: 10px;"
		 v-if="result.length>0">

			<div class='flexCenterCenter selectCell' v-for="(item,index) in result" :key='item.id'>

				<view class="flexCenterCenter" style="padding:6px 11.5px;">
					<span style='font-size: 12px;'>{{item.name}}</span>

					<image src="../../static/cha@2x.png" mode="" @click='onDelete(item.id)' style="padding-left: 3px;"></image>

				</view>
			</div>
		</view>
		<!-- 内容 -->
		<!-- 上拉加载 -->
		<view style="margin-top: -15px;">
			<view class="mainContent" v-for="(item, index) in contentData" :key="index">
				<view class="contentCell" v-if="item.type=='1'">
					<WordTem :content='item' />
				</view>
				<view class="contentCell" v-if="item.type=='3'">
					<wordManyImage :content='item' />
				</view>
				<view class="contentCell" v-if="item.type=='2'">
					<wordSingleImage :content='item' />
				</view>
				<view class="contentCell" v-if="item.type=='4'">
					<wordVideo :content='item' />
				</view>
			</view>
		</view>

		<uni-load-more :status="status" :content-text="contentText" />

		<!-- 	<view v-for="(item, index) in List" :key="index">
			<view class="">
				{{item}}
			</view>
		</view> -->


		<view class="popView">
			<van-popup :show="popShow" round position="bottom" custom-style="padding-top: 10px;" @close="onClose" style="position: relative;">
				<view>
					<van-checkbox-group v-model="resultId">
						<van-cell-group>
							<van-cell :data-index="index" v-for="(item, index) in list" :key="item.id" :title="item.name" @click="toggle(item)">
								<template #right-icon>
									<van-checkbox :name="item.id" style=' pointer-events: none;' />
								</template>
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>

					<view class="popBottom ">
						<view class="flexBetween" style="padding: 0 60px;">
							<van-button type="default" @click='onSet'>重置</van-button>
							<van-button type="info" @click='onConfim'>确认</van-button>
						</view>

					</view>
				</view>
				<view class="" style="height: 100px;">

				</view>
			</van-popup>
		</view>


	</view>
</template>

<script>
	import {
		appQuery,
		contentQuery,
		integralSign
	} from "../../api/home/index.js"
	import WordTem from './content/word.vue'
	import wordManyImage from './content/wordManyImage.vue'
	import wordSingleImage from './content/wordSingleImage.vue'
	import wordVideo from './content/wordVideo.vue'
	import uniLoadMore from '../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let page = 1,
		newData = ['2'];
	export default {
		data() {
			return {
				popShow: false,
				spaceId: '',
				list: [],
				result: [],
				resultSelect: [],
				resultId: [],
				selectFlag: '2',
				scrollTop: 0,
				signExplain: '连续签到1天，今日+10',
				signFlag: false,
				"current": 1,
				"pageSize": 10,
				total: 1,
				List: [],
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				demo: {
					top: 0,
					height: 0
				},
				contentData: [],
				contentBottom: false,
				newData: [],
				spaceNameData: {},
				bgHeight: '',
				spaceLength: '',
				selectValueLength: '',
				pageMax: ''
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			this.bgHeight = 210

		},
		onShow(option) {
			// 获取当前小程序的页面栈
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length - 1];
			// 打印出当前页面中的 options
			// console.log(currentPage.options)
			this.spaceNameData = uni.getStorageSync('spaceData')
			// console.log(this.spaceNameData )
			// this.spaceNameData = uni.getStorageSync('appSpaceVOList')[0]
			this.spaceLength = uni.getStorageSync('appSpaceVOList').length
			this.signFlag = this.spaceNameData.sign
			if (this.signFlag == true) {
				this.signExplain = `连续签到${this.spaceNameData.days}天，明日+${this.spaceNameData.integral}`
			} else {
				this.signExplain = `连续签到${this.spaceNameData.days}天，今日+${this.spaceNameData.integral}`
			}

			this.current = 1
			this.contentBottom = false
			//获取栏目
			this.spaceId = this.spaceNameData.spaceId

			this.getContent()
			// })
			page = 1
			this.List = ['1'];
		},

		onLoad() {
			this.spaceNameData = uni.getStorageSync('spaceData')
			this.spaceId = this.spaceNameData.spaceId
			this.resultId = []
			appQuery({
				spaceId: this.spaceId
			}).then(res => {
				let data = res.data.data

				this.list = []
				this.result = []
				// this.result = JSON.parse(JSON.stringify(data))
				this.list = JSON.parse(JSON.stringify(data))
				this.resultId = []
				// data.forEach((item) => {
				// 	this.resultId.push(item.id)
				// })
				this.getContent()
			})
			
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {

			// console.log('上拉加载更多');
			this.status = 'more';
			let _this = this
			setTimeout(function() {
				_this.loadMoreFunc();
				// loadMoreView.loadMore();
			}, 500)


		},
		//下拉刷新
		onPullDownRefresh() {
			// console.log('刷新');
			this.current = 1

			this.getContent()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(res) {

			// setInterval(() => {
			this.scrollTop = res.scrollTop
			// }, 20)
			// console.log(this.scrollTop);
		},
		components: {
			WordTem,
			wordManyImage,
			wordSingleImage,
			wordVideo,
			uniLoadMore
		},
		methods: {
			// ...mapMutations(['setUserInfo']),
			//获取内容
			getContent() {
				let columnIdList = []
				this.result.forEach((item) => {
					columnIdList.push(item.id)
				})
				let data = {
					"columnIdList": columnIdList,
					"sortType": this.selectFlag,
					"spaceId": this.spaceId,
					page: this.current,
					size: this.pageSize,
					"idNo": uni.getStorageSync('realName').idNo,
					"orgId": this.spaceNameData.orgId,
				}

				contentQuery(data).then(res => {
					let data = res.data.data
					this.contentData = data
					this.total = res.data.total
					this.pageMax = Math.ceil(this.total / this.pageSize)
				})
				if (this.total <= 10) {
					this.status = 'noMore'
				}
			},
			//下滑加载新内容
			getContent2() {
				let columnIdList = []
				this.result.forEach((item) => {
					columnIdList.push(item.id)
				})
				let data = {
					"columnIdList": columnIdList,
					"sortType": this.selectFlag,
					"spaceId": this.spaceId,
					page: this.current,
					size: this.pageSize,
					"idNo": uni.getStorageSync('realName').idNo,
					"orgId": this.spaceNameData.orgId,
				}
				contentQuery(data).then(res => {
					let data = res.data.data
					this.newData = data
					this.contentData = this.contentData.concat(data);
				})
			},
			//点击签到
			onSign() {

				let data = {
					"idNo": uni.getStorageSync('realName').idNo,
					"orgId": this.spaceNameData.orgId,
					"personId": this.spaceNameData.personId,
					"projectId": this.spaceNameData.projectId
				}

				integralSign(data).then(res => {
					// console.log(res);
					let data = res.data.data

					this.spaceNameData.days = data.days
					this.spaceNameData.integral = data.integral
					this.spaceNameData.sign = true

					this.signFlag = true

					this.signExplain = `连续签到${this.spaceNameData.days}天，明日+${this.spaceNameData.integral}`

					uni.setStorageSync('spaceData', this.spaceNameData)

					let appSpaceVOList = uni.getStorageSync('appSpaceVOList')
					appSpaceVOList.forEach(item => {
						if (this.spaceNameData.spaceId == item.spaceId) {
							item.days = data.days
							item.integral = data.integral
							item.sign = true

							// console.log(item);
						}
					})
					console.log(appSpaceVOList);
					uni.setStorageSync('appSpaceVOList', appSpaceVOList)
				})

				// this.signFlag = true
				// this.signExplain = `连续签到${this.spaceNameData.days}天，明日+${this.spaceNameData.integral}`
			},
			//点击筛选
			onSelect() {
				this.popShow = true
				this.resultSelect = JSON.parse(JSON.stringify(this.result))
				// console.log(this.popShow);
			},
			//关闭弹出层
			onClose() {
				this.popShow = false
			},
			onSet() {
				this.resultId = []
				this.resultSelect = []
			},
			onConfim() {
				this.result = JSON.parse(JSON.stringify(this.resultSelect))
				this.popShow = false
				this.current = 1
				this.contentBottom = false
				this.getContent()
			},
			// 上拉加载
			loadMoreFunc() {
				//展示loading
				// console.log('loadMoreFunc');

				this.status = 'loading';
				this.current++
				// console.log(this.current);
				if (this.current <= this.pageMax) {
					this.getContent2()
				} else {
					this.contentBottom = true
					this.status = 'noMore';
				}

			},


			//复选框
			toggle(item) {
				// console.log(item);

				const {
					id
				} = item
				const result = this.resultId
				// console.log(this.resultId);
				const index = result.findIndex((item) => {
					return item == id
				})
				if (index > -1) {
					result.splice(index, 1)
				} else {
					result.push(id)
				}
				this.resultId = result




				const index2 = this.resultSelect.findIndex((item) => {
					return item.id == id
				})
				// console.log(index2);
				if (index2 > -1) {
					this.resultSelect.splice(index2, 1)
				} else {
					this.resultSelect.push(item)
				}
				// this.resultSelect = JSON.parse(JSON.stringify(resultSelect))



			},
			//最新最热
			onNewHot(val) {
				this.selectFlag = val
				this.current = 1
				this.contentBottom = false
				this.getContent()
			},
			//点击叉号
			onDelete(val) {

				let newArr = []
				newArr = this.result.filter(item => item.id != val);
				this.result = newArr

				this.resultId = this.resultId.filter(item => item != val);
				this.resultSelect = JSON.parse(JSON.stringify(this.result))
				// console.log(this.resultId);
				// console.log(this.result);
				this.current = 1
				this.contentBottom = false
				this.getContent()
			},
			// 选择单位
			selectLabor() {
				if (this.spaceLength >= 2) {
					uni.navigateTo({
						url: '../laborList/laborList'
					});
				}

			},
			
		}
	}
</script>

<style scoped lang="less">
	.pageTop {
		/* height: 142px; */
		color: #fff;
		background-image: url('https://lw-sit.oss-cn-beijing.aliyuncs.com/lw/RBvc-upload-1618990273872-28/1624589879790组1@2x.png');
		
		// background-image: url('https://fbzh-wage.oss-cn-hangzhou.aliyuncs.com/lw/RBvc-upload-1618990273872-28/1627365960286homebg@2x.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top left;
		overflow: hidden;
		position: relative;
	}

	.pageTopRight ::v-deep .van-button--default {
		font-size: 12px;
		color: #fff;
		width: 52px;
		height: 27px;
		line-height: 27px;
		background: linear-gradient(90deg, #FFCB2D 0%, #FF8236 100%);
		/* box-shadow: 0px 10px 20px 0px rgba(104, 114, 255, 0.25); */
		border-radius: 13.5px;
		border: none;
		padding: 0;
	}

	.pageTopRight ::v-deep .van-button--warning {
		font-size: 12px;
		color: #fff;
		width: 52px;
		height: 27px;
		line-height: 27px;
		background: #c2c2c2;
		/* box-shadow: 0px 10px 20px 0px rgba(104, 114, 255, 0.25); */
		border-radius: 13.5px;
		border: none;
		padding: 0;
	}

	.popBottom ::v-deep .van-button--default {
		width: 110px;
	}

	.popBottom ::v-deep .van-button--info {
		font-size: 15px;
		color: #fff;
		background-color: #007AFF;
		border: none;
		width: 110px;
		/* width: 100%;
 */
	}

	.popBottom {
		position: absolute;
		bottom: 30px;

		width: 100%;
	}

	.pageTopLeftTitle {
		font-size: 18px;
		margin-bottom: 10px;

	}

	.pageTopLeft {
		font-size: 12px;
		padding-left: 15px;
		/* margin-top: 90px; */
		/* padding-top: 60px; */
	}

	.pageTopRight {
		/* margin-top: 90px; */
		font-size: 12px;
		margin-right: 15px;
	}

	::v-deep .van-checkbox__icon--checked {
		color: #1890ff;
		border-color: #fff;
		background-color: #fff;
	}

	::v-deep .van-checkbox__icon {
		border: none;
	}

	.select {
		/* width: 100%; */
		background-color: #fff;
		/* height: 42px; */
		padding: 10px 15px;
		padding-bottom: 0;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}

	.selectActive {
		font-size: 18px;
		color: #5570FF;
		background-color: #fff;
	}


	.pageSizeOpacity {
		font-family: 'PingFang SC';
		opacity: 0.8;

	}

	.topTitleDefault {
		/* position: fixed;
		width: 100%;
		top: 0;
		z-index: 99; */
		/* background: #44BB00; */
		/* background-image: linear-gradient(90deg, #2D6DFF 0%, #7A73FF 100%); */
		background-image: linear-gradient(90deg, #F12B0A 0%, #D81400 100%);
		/* background: #F12B0A; */
	}

	.topTitleActive {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 99;
		/* position: fixed;
		top: 0; */
		background: #fff;
		/* background-image:#fff; */
	}

	.topDiv {
		text-align: center;
		padding-top: 45px;
		height: 40px;
		line-height: 40px;
	}

	/* .mainContent {
		padding-bottom: 40px;
	} */

	.contentCell {
		padding: 11px 0;
		margin: 0 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	/* .mainContent :last-child {
		border: none;
	} */
	.selectProject {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.flexCenterCenter {
			flex-wrap: wrap;
		}

		.flexCenterCenter ::v-deep image {
			width: 8px;
			height: 8px;
		}

	}


	.flexStart {
		flex-wrap: wrap;
	}

	.image-bg {
		/* position: absolute;
	    z-index: -1;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    right: 0; */
		width: 100%;
		height: 100%;
	}

	.pageTop ::v-deep image {
		width: 375px;
		height: 142px;
	}

	::v-deep .van-icon {
		font-size: 14px;
	}

	.bg-click {
		background-color: #fff;
	}

	.selectCell {
		background-color: #F2F2F2;
		margin-right: 2%;
		border-radius: 10px;
		margin-bottom: 10px;
		width: 32%;
	}

	.selectProject :nth-child(3n) {
		margin-right: 0px;
	}

	/* .selectCell4n {
		margin-right: 0px;
	} */
</style>
